<template>
  <div class="head">
    <div class="nav">
      <div class="logo">
        <img src="@/assets/images/logo2.png" alt="logo" title="AXIE" />
      </div>
      <div class="navList hidden-sm-and-down">
        <span v-for="(item, index) in props.navList" :key="index" @click="changeNav(item)">{{ $t(item.name) }}</span>
      </div>
    </div>
    <!-- 小于sm 显示菜单折叠部分 -->
    <div class="menu" @click="drawer = true"><i class="iconfont icon-caidan"></i></div>
    <!-- sm 隐藏语言部分 -->
    <div class="hidden-sm-and-down rightBox">
      <div class="connect" v-if="mainStore.walletAccount && mainStore.walletNetwork">
        <span>{{ formatAddr(mainStore.walletAccount) }}</span>
      </div>
      <div class="connect" @click="mainStore.setShowWalletDialog(true)" v-else>
        <span v-if="!mainStore.walletAccount">Connect</span>
        <span v-else-if="!mainStore.walletNetwork">Network Error</span>
      </div>

      <div class="lang">
        <el-dropdown class="langBtn" trigger="click" :teleported="false" @command="handleCommand">
          <div class="el-dropdown-link curLang">
            <img class="Img" :src="langObj.srcPath" alt="" />
            <span>{{ langObj.name }}</span>
            <el-icon class="el-icon--right">
              <CaretBottom />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="item" v-for="(item, index) in langList" :key="index">
                <div class="inner"><img class="Img" :src="item.srcPath" alt="" />{{ item.name }}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

  <el-drawer class="popup" v-model="drawer" direction="ltr" size="90%">
    <div class="navList">
      <div class="navItem" v-for="(item, index) in props.navList" :key="index" @click="handleScroll(item.id)">
        {{ $t(item.name) }}
      </div>

      <div class="navItem connect" v-if="mainStore.walletAccount && mainStore.walletNetwork">
        <span>{{ formatAddr(mainStore.walletAccount) }}</span>
      </div>
      <div class="navItem connect" @click="mainStore.setShowWalletDialog(true)" v-else>
        <span v-if="!mainStore.walletAccount">{{ $t('ismsg.router.connect') }}</span>
        <span v-else-if="!mainStore.walletNetwork">{{ $t('ismsg.router.error') }}</span>
      </div>
    </div>
    <div class="langPopver">
      <el-popover placement="right" :teleported="false" trigger="click">
        <template #reference>
          <div class="connect">
            <img class="Img" :src="langObj.srcPath" alt="" />
            <span>{{ langObj.name }}</span>
            <i class="iconfont icon-arrow_right_fat"></i>
          </div>
        </template>
        <div class="langList">
          <div class="inner" v-for="(item, index) in langList" :key="index" @click="handleChangeLang(item)">
            <img class="Img" :src="item.srcPath" alt="" />{{ item.name }}
          </div>
        </div>
      </el-popover>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, ref, watchEffect, watch, getCurrentInstance } from 'vue';
import { CaretBottom } from '@element-plus/icons-vue';
import { themeConfig, langList } from '@/utils/config.ts';
import { formatAddr } from '@/utils/common';
import { useI18n } from 'vue-i18n';
import { getCurrentWallet } from '@/a-wallet/index';
import axios from 'axios';
import { useMainStore } from '@/store';
import { ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';

const { proxy } = getCurrentInstance() as any;

const route = useRoute();
const router = useRouter();

const mainStore = useMainStore();

const props: any = defineProps({ navList: Array });

const drawer = ref(false);
const langObj = ref<any>({});
langObj.value = langList.find((v: any) => v.name == themeConfig.value.globalI18n);

let timer: any = ref(null);

onMounted(() => {
  getCurrentWallet();
  watchEffect(() => {
    console.log('walletAccount', mainStore.walletAccount);
    if (mainStore.walletAccount) {
      clearInterval(timer);
      getBaseData();
      timer = setInterval(() => {
        getBaseData();
      }, 30000);
    }
  });
});
onBeforeUnmount(() => {
  clearInterval(timer);
});

watch(
  () => mainStore.loading,
  (loading_) => {
    if (loading_) {
      ElLoading.service({ fullscreen: true });
    } else {
      ElLoading.service().close();
    }
  }
);

const getBaseData = async () => {
  // console.log('$api', proxy.$api);
  try {
    const response = await axios.get(`${proxy.$api}/info?address=${mainStore.walletAccount}`);
    if (response.status === 200 && response.data.code === 10000) {
      const baseData = response.data.data;
      mainStore.setBaseData(baseData);
      console.log('baseData', mainStore.baseData);
    }
  } catch (error) {
    console.error(error);
  }
};

const changeNav = (v: any) => {
  //质押详情页返回首页，
  if (route.path.indexOf('/pledgeDetails') != -1) {
    router.back();
    nextTick(() => (window.location = v.id));
  } else {
    window.location = v.id;
  }
};
const handleScroll = (id: string) => {
  //质押详情页返回首页，
  if (route.path.indexOf('/pledgeDetails') != -1) {
    router.back();
    setTimeout(() => ((window as any).location = id), 30);
  } else {
    (window as any).location = id;
  }
  nextTick(() => (drawer.value = false));
};

const handleCommand = (command: any) => {
  if (langObj.value == command) return;
  langObj.value = command;
  localStorage.setItem('LANG', command.name);
  themeConfig.value.globalI18n = command.name;
};
const handleChangeLang = (item: any) => {
  if (langObj.value == item) return;
  drawer.value = false;
  langObj.value = item;
  localStorage.setItem('LANG', item.name);
  themeConfig.value.globalI18n = item.name;
};

// 获取实例
const { messages, locale }: any = useI18n();
const localeLang = ref(messages[themeConfig.value.globalI18n]); // 默认语言

// 修改element 和 i18n 默认语言
const changeLanguage = () => {
  locale.value = themeConfig.value.globalI18n;
  localeLang.value = messages.value[locale.value];
};
// 监听修改语言
watchEffect(changeLanguage);
</script>

<style lang="scss" scoped>
@mixin Img() {
  width: 34px;
  height: 22px;
  margin-right: 6px;

  img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
}

@mixin btnStyle {
  color: #fff;
  background-color: #7b3b22;
  border-radius: 14px;
  font-family: MFBanHei_Noncommercial-Regular;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head {
  width: 90%;
  height: 80px;
  background: url('@/assets/images/nav.png') no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 2vh;
  left: 5%;
  right: 5%;
  z-index: 99;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .menu {
    display: none;

    i {
      font-size: 40px;
      color: #fff;
      cursor: pointer;
    }
  }

  .nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .logo {
      width: 84px;
      position: relative;
      top: -12px;

      img {
        width: 100%;
      }
    }

    .navList {
      span {
        display: inline-block;
        padding: 5px 10px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
      }
    }
  }

  .rightBox {
    display: flex;

    .connect {
      width: 120px;
      height: 35px;
      @include btnStyle();
      margin-right: 10px;
      cursor: pointer;

      i {
        font-size: 20px;
        margin-right: 4px;
      }
    }

    .lang {
      width: 100px;
      height: 35px;
      @include btnStyle();

      .langBtn {
        .Img {
          @include Img();
        }

        .curLang {
          color: #fff !important;
          display: flex;
          align-items: center;
          cursor: pointer;
        }

        .inner {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #7b3b22;
        }
      }
    }
  }
}

.popup {
  .navList {
    .navItem {
      line-height: 42px;
      font-size: 22px;
      padding-left: 10px;
      font-family: MFBanHei_Noncommercial-Regular;
      border-bottom: thin solid rgba($color: #656565, $alpha: 0.23);
      cursor: pointer;
      &.connect {
        font-size: 16px;
      }
    }
  }

  .connect {
    width: 160px;
    line-height: 35px;
    padding-left: 0 !important;
    margin-top: 1vh;
    font-size: 16px;
    @include btnStyle();

    i {
      margin-right: 4px;
      font-size: 24px;
    }

    img {
      width: 34px;
      height: 22px;
      margin-right: 6px;
      vertical-align: middle;
    }
  }

  .langList {
    .inner {
      margin-bottom: 5px;

      img {
        width: 34px;
        height: 22px;
        margin-right: 6px;
        vertical-align: middle;
      }
    }
  }
}

@media screen and (max-width: 992px) {
  .head {
    height: 68px;

    .menu {
      display: block;
    }
  }
}

@media screen and (max-width: 500px) {
  .logo {
    width: 66px !important;
    top: -6px !important;
  }
}
</style>
